// 混合（Mixin）定义
.marginAuto{
  left: 0;
  right: 0;
  margin: auto;
}

.transformTop{
  top: 50%;
  transform: translateY(-50%);
}
.transformAll{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.w1024None{
  @media screen and (max-width: 1024px) {
    display: none;
  }
}

.afterBorder{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  mask-image: linear-gradient(
          rgb(255, 255, 255) 0px,
          rgb(255, 255, 255) 0px
  ),
  linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
  -webkit-mask-position-x: 0%;
  -webkit-mask-position-y: 0%;
  mask-size: auto, auto;
  mask-repeat: repeat, repeat;
  mask-origin: padding-box, border-box;
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
  opacity: 1;
  clip-path: polygon(
          100% 50%,
          100% 0%,
          calc(2 * var(--progress)) 0%,
          calc(2 * var(--progress)) 50%,
          100% 50%,
          0% 50%,
          0% 100%,
          calc(200% - calc(2 * var(--progress))) 100%,
          calc(200% - calc(2 * var(--progress))) 50%
  );
  z-index: -1;
  border-radius:  99px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-image: initial;
  background: linear-gradient(
          277.33deg,
            rgb(252, 227, 68) -2.48%,
          rgb(121, 250, 75) 47.21%,
          rgb(48, 215, 241) 93.62%
  )
  center center / 110%;
  transition: opacity 0.2s ease-in-out 0s;
}


.underline{
  width: var(--progress);
  content: '';
  position: absolute;
  bottom: -2px;
  height: 1px;
  z-index: -1;
  background: linear-gradient(
          277.33deg,
            rgb(252, 227, 68) -2.48%,
          rgb(121, 250, 75) 47.21%,
          rgb(48, 215, 241) 93.62%
  )
  0% 0% / 105%;
  border-radius: 0px;
  transition: width 0.5s;
}